import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { postLogin } from '../../api/login'
import { message } from 'antd';
// 这个action是可以直接调用的，用来处理异步操作获取数据
export const loadData = createAsyncThunk('login/loadData', async (userfrom) => {
  console.log(userfrom);
  const res = await postLogin(userfrom);
  return res; // 此处的返回结果会在 .fulfilled中作为payload的值
});
export const loginSlice = createSlice({
  name: 'login', // 命名空间，在调用action的时候会默认的设置为action的前缀
  // 初始值
  initialState: {
    // isLogin: false,
  },
  // 这里的属性会自动的导出为actions，在组件中可以直接通过dispatch进行触发
  reducers: {
    login (state, { payload }) {
      // console.log(payload);
      // const { username, password } = payload
      // console.log(username, password);
      // state.username = username
      // state.password = password
    },
    logout(){
      console.log(2222);
      localStorage.removeItem('token')
    }
  },
  // 可以额外的触发其他slice中的数据关联改变
  extraReducers: builder => {
    // [loadData.fulfilled] (state, { payload }) {
    //   console.log(payload);
    // },
    // [loadData.rejected] (state, err) {
    //   console.log(err);
    // },
    // [loadData.pending] (state) {
    //   console.log('进行中');
    // },
    builder.addCase(loadData.fulfilled, (state, { payload }) => {
      localStorage.setItem('token',payload.data.token)
    })
    builder.addCase(loadData.rejected, (state, err) => {
      console.log(err);
    })
    builder.addCase(loadData.pending, (state) => {
      console.log('进行中');
    })
  }
})
export const { login ,logout} = loginSlice.actions;
export default loginSlice.reducer; // 导出reducer，在创建store时使用到